<script setup>
import { computed, ref } from "vue";

// 自定义的属性
const props = defineProps({
    title: String,
    size: { type: Number, default: 1 },
    showDelete: { type: Boolean, default: true },
    showCompleteDelete: { type: Boolean, default: true },
});

// 自定义事件（删除事件：（true：彻底删除，false：删除））
const emits = defineEmits(["delete"]);

// 是否显示删除提醒框
const show = ref(false);

// 删除提醒语句
const describe = computed(() => {
    let size = props.size; // 删除的个数
    let showDelete = props.showDelete; // 是否显示删除按钮
    let showCompleteDelete = props.showCompleteDelete; // 是否显示删除按钮
    let title = props.title; // 文件名称
    if (size === 1) {
        // 单文件删除
        if (!showDelete && showCompleteDelete) {
            return "彻底删除《" + title + "》将无法恢复！";
        }

        if (showDelete && showCompleteDelete) {
            return (
                "删除《" + title + "》可在回收站中恢复，彻底删除将无法恢复！"
            );
        }

        if (showDelete && !showCompleteDelete) {
            return "删除《" + title + "》可在回收站中恢复！";
        }
    } else {
        // 多文件删除
        if (!showDelete && showCompleteDelete) {
            return "您即将对" + size + "个文件彻底删除，将无法恢复！";
        }

        if (showDelete && showCompleteDelete) {
            return (
                "您即将对" +
                size +
                "个文件删除，可在回收站中恢复，彻底删除将无法恢复！"
            );
        }

        if (showDelete && !showCompleteDelete) {
            return "您即将对" + size + "个文件删除，可在回收站中恢复！";
        }
    }
});

// 改变删除提醒框的显示状态
const changeShowValue = (isShow) => {
    show.value = isShow;
};

/**
 * 删除操作
 * @param {Boolean} isComplete 是否彻底删除
 */
const deleteAction = (isComplete) => {
    show.value = false; // 关闭提醒框
    emits("delete", isComplete); // 通知父组件触发删除操作（是否彻底删除）
};

// 将数据暴露出去
defineExpose({ changeShowValue });
</script>

<template>
    <n-modal
        v-model:show="show"
        preset="dialog"
        type="warning"
        title="删除提醒"
    >
        <template #default>{{ describe }}</template>
        <template #action>
            <n-button
                v-if="showCompleteDelete"
                type="error"
                secondary
                @click="deleteAction(true)"
            >
                彻底删除
            </n-button>
            <n-button
                v-if="showDelete"
                type="error"
                tertiary
                @click="deleteAction(false)"
            >
                删除
            </n-button>
            <n-button
                tertiary
                @click="show = false"
            >取消</n-button>
        </template>
    </n-modal>
</template>